<script setup lang="ts">
import {getPreID} from "@/api/home/index";
import {ref} from "vue"
import {useRoute} from "vue-router";

//接收路由id
const route = useRoute()
const id = route.query.treeId
console.log(id)

//详情
let data = ref([])
let status = ref('')
let date = ref('')
//待开始
let waitBegin = ref<boolean>()
//进行中
let progress = ref<boolean>()
//已结束
let done = ref<boolean>()
//学生已取消、老师已取消
let stuCancelled = ref<boolean>()
let teaCancelled = ref<boolean>()
getPreID(id).then((item: any) => {
    if (item.code === 200) {
        data.value = item.data
        console.log(data.value)
    }
    switch (new Date(data.value.psyScheduling.date).getDay()) {
        case 1:
            date.value = '星期一';
            break;
        case 2:
            date.value = '星期二';
            break;
        case 3:
            date.value = '星期三';
            break;
        case 4:
            date.value = '星期四';
            break;
        case 5:
            date.value = '星期五';
            break;
        case 6:
            date.value = '星期六';
            break;
        case 7:
            date.value = '星期七';
            break;
    }
    switch (data.value.status) {
        case "0":
            waitBegin.value = true;
            break;
        case "1":
            progress.value = true;
            break;
        case "2":
            done.value = true;
            break;
        case "3":
            stuCancelled.value = true;
            break;
        case "4":
            teaCancelled.value = true;
            break;
    }
})

</script>

<template>
    <div class="box">
        <p>
            <router-link to="bookingC">
                <van-icon name="arrow-left" class="toleft"/>
            </router-link>
            <span>预约详情</span>
        </p>
        <div class="section">
            <!--心理咨询师  待开始、已取消、进行中、已结束、网络预约-->
            <div class="counselor">
                <p>心理咨询师</p>
                <h3>{{ data.psyTeacher.name }}</h3>
                <div class="counselorImg">
                    <span>{{ data.psyTeacher.count }}人咨询过</span>
                    <img :src="'http://192.168.5.120:8090'+data.psyTeacher.avatar">
                </div>
            </div>
            <!--咨询时间  待开始、已取消、进行中、已结束、网络预约-->
            <div class="consultationTime">
                <div class="left">
                    <p>咨询时间</p>
                    <div class="time">
                        <h3><span>{{ data.psyScheduling.date }}</span>&nbsp;&nbsp;&nbsp;&nbsp;{{ date }}</h3>
                        <p class="hour">{{ data.psyScheduling.startTime }}-{{ data.psyScheduling.endTime }}<span
                                class="minute">({{ data.duration }}分钟)</span></p>
                    </div>
                </div>
                <div class="right">
                    <img src="../../../assets/images/团队灰.png">
                    团体咨询
                </div>
            </div>
            <!--咨询方式  待开始、已取消、进行中、已结束-->
            <div class="consultationMode">
                <p>咨询方式</p>
                <h3>{{ data.mode }}</h3>
                <!--网络预约-->
                <!--                <h3>网络咨询</h3>-->
                <!--                <div class="status">进行中</div>-->
                <div class="status" style="background-color: #F7F7B5;color: #D9BA31;" v-if="waitBegin">待开始</div>
                <div class="status" style="background-color: #CEE8FF;color: #1896FF;" v-if="progress">进行中</div>
                <div class="status" style="background-color: #F2F3F4;color: #D3CBCB;" v-if="done">已结束</div>
                <div class="status" style="background-color: #F2F3F4;color: #D3CBCB;" v-if="stuCancelled || teaCancelled">已取消</div>
            </div>
            <!--取消人  已取消-->
            <div class="telephone" v-if="stuCancelled || teaCancelled">
                <p>取消人</p>
                <h3 v-if="teaCancelled">{{data.psyTeacher.name}}</h3>
                <h3 v-if="stuCancelled">本人</h3>
            </div>
            <!--办公电话  待开始、-->
            <div class="telephone" v-if="waitBegin" style="min-height: 40px">
                <p>办公电话</p>
                <h3>{{data.psyTeacher.phone}}</h3>
            </div>
            <!--咨询地址  待开始、-->
            <div class="consultationAddress" v-if="waitBegin" style="min-height: 40px">
                <p>咨询地址</p>
                <h3>{{data.psyTeacher.location}}</h3>
            </div>
        </div>
        <!--待开始、已取消、进行中、已结束、网络预约-->
        <div class="content">
            <p>
                <img src="../../../assets/images/对话框1.png">
                咨询内容
            </p>
            <p class="contentSection">
                {{ data.content }}
            </p>
        </div>
        <!--取消理由  已取消-->
        <div class="cancellation" v-if="stuCancelled || teaCancelled">
            <p>
                <img src="../../../assets/images/对话框1.png">
                取消理由
            </p>
            <p class="cancellationSection">
                {{ data.reason }}
            </p>
        </div>
        <!--老师建议  已结束-->
        <div class="cancellation" v-if="done">
            <p>
                <img src="../../../assets/images/对话框1.png">
                老师建议
            </p>
            <p class="cancellationSection">
                {{ data.teacherSuggest }}
            </p>
        </div>
        <!--咨询反馈  已结束-->
        <div class="feedbackConsultation" v-if="done">
            <p>
                <img src="../../../assets/images/对话框1.png">
                咨询反馈
                <img src="../../../assets/images/签字.png" class="pen">
            </p>
            <p class="cancellationSection">
                {{data.studentFeedback}}
            </p>
        </div>
        <!--待开始、-->
        <router-link :to="{path:'deleteCancel',query:{id:id}}">
            <button class="cancelBtn" v-if="waitBegin">取消预约</button>
        </router-link>
        <!--按钮  进行中、-->
        <div class="bottomBtn" v-if="progress">
            <button class="tel">拨打电话</button>
            <button class="feedback">添加反馈</button>
        </div>
    </div>
</template>

<style scoped lang="less">
.box {
  position: relative;
  //padding-top: 25px;
  //padding-left: 15px;
  min-height: 100vh;
  background-color: #F8F8F8;

  p {
    //margin-left: 10px;
    padding: 20px 15px;
    position: relative;
    background-color: white;

    .toleft {
      font-size: 22px;
    }

    span {
      position: absolute;
      left: 45px;
      font-size: 18px;
    }
  }

  .section {
    margin: 10px auto;
    padding: 10px;
    width: 94%;
    //height: 400px;
    border-radius: 8px;
    background-color: white;

    > div {
      padding: 20px 10px 10px;
      border-bottom: 1px solid #F2F3F4;

      &:last-child {
        border-bottom: 0;
      }

      //background-color: pink;
      > p {
        padding: 0;
        font-size: 16px;
        color: #B3B5B3;
      }

      h3 {
        font-size: 18px;
        font-weight: 700;
      }
    }

    .counselor {
      position: relative;

      .counselorImg {
        position: absolute;
        bottom: 18px;
        right: 10px;

        span {
          margin-right: 50px;
          color: #B3B5B3;
        }

        img {
          position: absolute;
          bottom: -2px;
          right: 0;
          width: 30px;
          height: 30px;
          //border: 1px solid #B3B5B3;
          border-radius: 50%;
        }
      }
    }

    .consultationTime {
      position: relative;

      .left {
        > p {
          padding: 0;
          font-size: 14px;
          color: #B3B5B3;
        }

        .time {
          h3 {
            font-size: 18px;
            font-weight: 700;

            span {
              font-size: 14px;
              font-weight: 200;
            }
          }

          .hour {
            padding: 0;
            font-size: 16px;
            font-weight: 700;

            .minute {
              margin-left: 70px;
              font-size: 12px;
              color: #B3B5B3;
            }
          }
        }
      }

      .right {
        position: absolute;
        bottom: 40px;
        right: 20px;
        color: #666666;
        font-size: 14px;

        img {
          width: 28px;

        }
      }
    }

    .consultationMode {
      position: relative;

      .status {
        position: absolute;
        right: 0;
        top: 35px;
        padding-left: 10px;
        width: 80px;
        height: 25px;
        font-size: 14px;
        text-align: center;
        line-height: 25px;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
      }
    }
  }

  .content, .cancellation, .feedbackConsultation {
    margin: 15px auto;
    padding: 10px;
    width: 94%;
    min-height: 100px;
    //height: 400px;
    border-radius: 8px;
    background-color: white;

    p {
      padding: 0;

      img {
        margin: 0 10px;
        width: 25px;
      }
    }

    .contentSection, .cancellationSection {
      min-height: 80px;
      padding: 0 10px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4; /* 显示3行 */
        overflow: hidden;
        text-overflow: ellipsis; /* 可选，用来在文本末尾显示省略号 */
    }
  }

  .cancelBtn {
    //position: fixed;
    position: absolute;
    bottom: 20px;
    left: 3vw;
    padding: 10px;
    width: 94%;
    border: 0;
    border-radius: 5px;
    font-size: 16px;
    background-color: #1989FA;
    color: white;
  }

  .bottomBtn {
    position: absolute;
    bottom: 20px;
    left: 8vw;
    width: 100%;

    button {
      padding: 10px;
      background-color: #1892FF;
      color: white;
      font-size: 12px;
      border: 0;
      border-radius: 5px;
    }

    .tel {
      width: 45%;
    }

    .feedback {
      margin-left: 4vw;
      width: 35%;
    }

  }
}
</style>